<template>
    <div class="wrapper">
           <ul class="list" v-for="(item,index) in categoryList">
               <li>
                 <span></span>
                 {{item.title}}
               </li>
             <!--递归组件的用法-->
               <li v-if="item.children" class="list_end" v-for="(val,index) in item.children">
                 {{val.title}}
               </li>
           </ul>
    </div>
</template>

<script>
    export default {
        name: "List",
        props:{
          categoryList:Array
        }
    }
</script>
<style lang="stylus" scoped>
   .wrapper{
      li{
        padding: 0 .1rem;
        height: .44rem;
        background: #fff;
        color: #333;
        font-size: .16rem;
        line-height: .44rem;
        text-indent: .2rem;
        border-bottom:1px solid #eaeaea;
        span{
          vertical-align :middle;
          display: inline-block;
          width: .18rem;
          height: .18rem;
          background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.225rem no-repeat;
          background-size: .2rem 1.5rem;
        }
      }
     .list_end{
       padding-left :.4rem;font-size :.14rem;
     }
   }
</style>
